<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.5&key=58c536d98f8fa9b22bfeac02bf965350&callback=init"></script>
   <style type="text/css">
      /*body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }*/
     body,html{
        width: 100%;
        height: 100%;
        margin: 0px
      }
div.info-top {
	font-weight: bold;
	color: #4178e2;
	font-size: 15px;
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius: 5px 5px 0 0;
}
div.info-top div {
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    padding: 0 10px;
}
.amap-marker .marker-route {
    position: absolute;
/*  width: 40px;
    height: 44px;  */
    width: 35px;
    height: 40px; 
    color: #e90000;
    background: url(${ctx}/images/gprs/poi-1.png) no-repeat;
    cursor: pointer;
}
    </style>
    <title>API加载</title>
  </head>
  <body>
  	<div id="abc" tabindex="0" style="height: 10%;">返回上一步</div>
  	<div id="container" tabindex="0" style="height: 90%;"></div>
<script type="text/javascript">
var marker,map,infoWindow;
var inputComName = "单位1";
var inputAddr = "北京市朝阳区阜荣街10号";
	
$(function(){
	// 初始化地图
	map = new AMap.Map('container', {
	   resizeEnable: true,
	   center:[108.337083,22.819613],// 默认南宁市
	   zoom:12
	});
	// 创建地址解析器
	AMap.plugin('AMap.Geocoder', function() {
	 geocoder = new AMap.Geocoder({
	    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
	    city: '全国'
	 });
	});
	
	if(inputComName!=""&&inputAddr!=""){
		// 调用查询(确定地址存在再进行调用)
		findCity(inputComName,inputAddr);
	}else{
		alert("地址不正确，未检索到");
	}


});

// 
function findCity(comName,addr){
	  geocoder.getLocation(addr, function(status, result) {
		if (status === 'complete'&&result.geocodes.length) {
	    var lnglat = result.geocodes[0].location
	    if(!marker){
	        marker = new AMap.Marker();
	        map.add(marker);
	    }
	    marker.setPosition(lnglat);
	    map.setFitView(marker);
	    // 增加点击事件    
	    addDeckEvent(marker,lnglat,comName,addr);
	    // 打开信息窗体
	    openInfo(lnglat,comName,addr);
	  }else{
	  	//地理信息未解析成功调用
	    	alert(JSON.stringify(result));
	  }
});
}
			                
 //在指定位置打开信息窗体
function openInfo(lnglatXY,comName,addr) {
	var infoWindowTitle = "<div class='info-top'>"+comName+"</div>";
  var infoWindowHtml = [];
	infoWindowHtml.push(infoWindowTitle);//color: #4178e2;
	infoWindowHtml.push("<span style='font-weight: bold;'>地址：</span>" + addr+"</br>");
	infoWindowHtml.push("<div style='text-align: center;'>");
	infoWindowHtml.push("</div>");
	infoWindow = new AMap.InfoWindow({
    content: infoWindowHtml.join(""), //传入 dom 对象，或者 html 字符串
    offset: new AMap.Pixel(2, -22)
	});
  infoWindow.open(map,lnglatXY);
}
    
// 为覆盖物添加点击事件
function addDeckEvent(marker,lnglat,comName,addr){
	marker.on("click",function(e){
		openInfo(lnglat,comName,addr);
	});
}
    </script>
   
  </body>
</html>